<template>
<div class="login-container">
<!--  <div class="company-logo">-->
<!--    <img src="https://image.qcc.com/logo/00a3c1fac4b87d2675531abac5f2e54b.jpg?x-oss-process=style/logo_200">-->
<!--  </div>-->
  <div class="company-info">
    <!--插入一个logo图片-->
    <img src="../public/logo2x.png" style="width: 340px;height: 170px">
<!--    <div class="company-text">-->
<!--        <p class="group-name">内蒙古电力公司</p>-->
<!--        <p class="group-english">INNER MONGOLIA POWER GROUP</p>-->
<!--        <p class="company-name" >乌海超高压供电公司</p>-->
<!--        <p class="company-english">WUHAI EXTRA HIGH VOLTAGE POWER SUPPLY COMPANY</p>-->
<!--      </div>-->
  </div>
  <div class="input-item">
    <div><img src="../public/username2x.png" style="width: 25px;height: 25px"></div>
    <input class="input-field" type="text" placeholder="请输入用户名" v-model="username" :disabled="loading">
  </div>
  <div class="input-item">
    <div><img src="../public/password2x.png" style="width: 25px;height: 25px"></div>
    <input class="input-field" type="password" placeholder="请输入密码" v-model="password" :disabled="loading">
  </div>
  <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  <button class="login_btn" @click="login" :disabled="loading">
    {{ loading ? '登录中...' : '登录'   }}
  </button>
  <div class="agreement">
    登录即同意
    <a href="https://identity.tencent.com/docs/agreement/agreement/">用户协议</a>
  </div>
</div>
</template>
<script>
import { login, saveUserInfo } from './js/login';

export default {
  data() {
    return {
      username: "",
      password: "",
      errorMessage: "",
      loading: false
    }
  },
  methods: {
    async login() {
      // 清除之前的错误信息
      this.errorMessage = "";
      
      // 表单验证
      if (!this.username || !this.password) {
        this.errorMessage = "用户名和密码不能为空";
        return;
      }
      
      try {
        this.loading = true;
        
        // 调用登录 API
        const result = await login(this.username, this.password);
        
        if (result.code === 200) {
          // 登录成功
          console.log('登录成功:', result.data);
          
          // 保存用户信息
          saveUserInfo(result.data);

          // 跳转到首页
          if(this.username === 'scjsb') {
            this.$router.push('/add');

          }else{
            this.$router.push('/home');
          }

          if (this.username==='admin') {
            this.$router.push('/addUser');
          }

        } else {
          // 登录失败
          this.errorMessage = result.msg || '登录失败，请检查用户名和密码';
        }
      } catch (error) {
        console.error('登录请求出错:', error);
        this.errorMessage = '登录请求失败，请稍后再试';
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.error-message {
  color: #f56c6c;
  font-size: 14px;
  margin: 5px 0;
  padding: 5px 10px;
  background-color: #fef0f0;
  border-radius: 4px;
  text-align: center;
}
</style>
<style>
.login-container{
  width: 100%;
  min-height: 100vh;
  background-image: url("../public/bg2x.png");
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
}
.company-info{
  display: flex;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.company-text{
  display: flex;
  flex-direction: column;
}
.group-name,
.company-name {
  font-size: 16px;
  color: #333;
  margin: 2px 0;
  font-weight: bold;
  font-style: italic;
}
.group-english,
.company-english {
  font-size: 12px;
  color: #666;
  margin: 2px 0;
  font-style: italic;
}
.input-item{
  display: flex;
  align-items: center;
  width: 80%;
  max-width: 400px;
  height: 40px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 0 10px;
}
.input-field{
  flex:1;
  border: none;
  outline: none;
  font-size: 14px;
}
.verify-btn {
  color: black;
  border: none;
  cursor: pointer;
}
.login_btn{
  width: 80%;
  max-width: 400px;
  height: 44px;
  background-color: #28a745;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
}
.agreement{
  font-size: 12px;
  color: #999;
}
</style>